<template>
  <div class="my-city-container">
    <div class="my-city" @click="open">
      <span v-show="!address">请选择</span>
      <span class="address ellipsis" v-show="address">{{ address }}</span>
      <i class="iconfont icongc-btn-skip"></i>
    </div>
    <!-- 省市区 -->
    <picker v-model="visible" :data-items="cityItems" @change="onCityValuesChange">
      <div class="top-content picker-header" slot="top-content">
        <div class="cancel" @click="onHide">取消</div>
        <div class="title">请选择地址</div>
        <div class="submit" @click="onSubmit">确定</div>
      </div>
    </picker>
  </div>
</template>
<script>
import picker from 'vue-3d-picker'
import cityData from '@/common/city.json'
import scroll from '@/mixins/scroll'
export default {
  mixins: [scroll],
  components: {
    picker,
  },
  props: {
    addressData: {
      type: Object,
    }
  },
  data() {
    return {
      visible: false,
      cityItems: [],
      address: '',
      addressObj: {},
      province: '',
      city: '',
      area: '',
      oldData: {
        province: '河北省',
        city: '石家庄市',
        area: '长安区',
      },
    }
  },
  watch: {
    addressData: {
      handler: function () {
        let data = JSON.parse(this.addressData)
        this.address = data.province + data.city + data.area
        this.searchOld()
      },
      deep: true,
    },
    province(newVal) {
      // 复制市级数据 this.cityItems[1].values
      cityData.forEach((item) => {
        if (item.name === newVal) {
          this.cityItems[1].values = item.children
        }
      })
      // 从单个city 到 多个 导致显示bug
      this.initCityClass()
    },
    city(newVal) {
      // 复制县区级数据 this.cityItems[2].values
      this.cityItems[1].values.forEach((item) => {
        if (item.name === newVal) {
          this.cityItems[2].values = item.children
        }
      })
    },
  },
  created() {
    this.initCityItems()
  },
  methods: {
    onSubmit() {
      this.scroll(true)
      this.visible = false
      this.address = this.province + this.city + this.area
      this.addressObj['province'] = this.province
      this.addressObj['city'] = this.city
      this.addressObj['area'] = this.area
      // 通知父组件发生了input
      this.$emit('input', JSON.stringify(this.addressObj))
      this.$emit('adcode', this.adcode)
    },
    initCityItems() {
      // index 默认选中第几个  name 是values内 {} 要展示到页面的属性名， values 数据 类型数组
      this.cityItems = [
        { index: 0, name: 'name', values: cityData },
        { index: 0, name: 'name', values: cityData[0].children },
        { index: 0, name: 'name', values: cityData[0].children[0].children },
      ]
    },
    onHide() {
      this.visible = false
      this.scroll(true)
    },
    open() {
      this.visible = true
      this.scroll(false)
    },
    onCityValuesChange(province, city, area) {
      this.province = province.name
      this.city = city.name
      this.area = area.name
      this.adcode = area.code
    },
    searchOld() {
      let data = JSON.parse(this.addressData)
      // 遍历city 数据
      cityData.forEach((item, index) => {
        // 省份名字 和 回传省份名字一致
        if (item.name === data.province) {
          // 展示当前省份名字 取 index, 并且下面的市级数据赋予  this.cityItems[1].values
          this.cityItems[0].index = index
          this.cityItems[1].values = item.children
          // 遍历市级数据
          item.children.forEach((item1, index1) => {
            // 展示当面市级名字 取 index, 并且下面的县区级数据赋予  this.cityItems[2].values
            if (item1.name === data.city) {
              this.cityItems[1].index = index1
              this.cityItems[2].values = item1.children
              // 遍历县区级数据
              item1.children.forEach((item2, index2) => {
                // 展示当前县区级名字 取 index,
                if (item2.name === data.area) {
                  this.cityItems[2].index = index2
                }
              })
            }
          })
        }
      })
    },
    initCityClass() {
      if (this.cityItems[1].values.length > 1) {
        this.$nextTick(() => {
          document.getElementsByClassName(
            'picker-item-content'
          )[1].style.transform = 'rotateX(0.01deg)'
        })
      } else {
        this.$nextTick(() => {
          document.getElementsByClassName(
            'picker-item-content'
          )[1].style.transform = 'rotateX(0deg)'
        })
      }
    },
  },
}
</script>
<style lang="scss">
.picker-backdrop {
  overflow: hidden;
  position: fixed;
}
.picker-item {
  font-size: 0.3rem;
}
.picker-content {
  background-color: #f2f3f7;
}
.picker-helper:before {
  border-top: 1px solid rgba(173, 176, 167, 0.5);
  border-bottom: 1px solid rgba(173, 176, 167, 0.5);
}
</style>
<style lang="scss" scoped>
.my-city-container {
  .my-city {
    font-size: 0.28rem;
    color: #555555;
    span {
      margin-right: 0.22rem;
    }
    .address {
      display: inline-block;
      width: 4rem;
      margin-right: 0.22rem;
      text-align: right;
    }
    i {
      font-size: 0.28rem;
      color: #555555;
    }
  }
  .picker-header {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 0.32rem;
    background-color: #ffffff;
    // border-bottom: 1px solid rgba(173, 176, 167, 0.8);
    display: flex;
    align-items: center;
    justify-content: content;
    div {
      flex: 1;
      text-align: center;
    }
    .cancel {
      text-align: left;
      padding-left: 0.4rem;
    }
    .submit {
      text-align: right;
      padding-right: 0.4rem;
      color: #145afe;
    }
  }
}
</style>
